<template>
	<view class="meal card_b parent-class" @click="goDishesDetails" >
		<view class="flex " v-if="item.comboId">
			<image v-if="item.coverImage && JSON.parse(item.coverImage).length > 0"
				style="width: 170rpx;height: 170rpx;border-radius: 16rpx;" :src="JSON.parse(item.coverImage)[0].url"
				mode="aspectFill"></image>
			<!-- 			<image v-if="item.coverImage" style="width: 170rpx;height: 170rpx;border-radius: 16rpx;"
				:src="item.coverImage" mode=""></image> -->
			<view class="combo">
				<view class="">
					<view class="flex_between">
						<view class="flex f18" style="align-items: center;">
							<text>{{item.comboName}}</text>
						</view>
						<view class="sales f18"
							v-if="item.sales && tableColumn.filter(el=>el.dictLabel == '累计销量').length > 0 && tableColumn.filter(el=>el.dictLabel == '累计销量')[0].dictValue == 1">
							销量：{{item.sales < 0 ? 0 : item.sales}}
						</view>
					</view>
				<!-- 	{{item.listItem.length > 1}} -->
					<view class="describe" v-if="item.listItem && item.listItem.length > 0">
						<view class=" f18" v-for="i in item.listItem">
							<!-- 	<view class="" v-if="i.type == 1">
								主菜：{{i.foodDish.foodName}}
							</view> -->
							<view class="f18" v-if="i.type == 1">
								<text>主菜：{{i.foodDish.foodName}}</text>
								<text v-if="i.foodDish.huisType==1" style="padding-left: 5rpx;">🐷</text>
								<text v-if="i.foodDish.peType==1" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							</view>
							<view class="f18" v-else-if="i.type == 2">
								<text>配菜：{{i.foodDish.foodName}}</text>
								<text v-if="i.foodDish.huisType==1" style="padding-left: 5rpx;">🐷</text>
								<text v-if="i.foodDish.peType==1" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							</view>
							<view class="f18 flex" v-else-if="i.type == 3" style="display: flex; align-items: center;">
								<text>主食：{{i.foodDish.foodName}}</text>
								<text v-if="i.foodDish.huisType==1" style="padding-left: 5rpx;">🐷</text>
								<text v-if="i.foodDish.peType==1" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>

							</view>
							<view class="f18" v-else-if="i.type == 4">

								<text>汤类：{{i.foodDish.foodName}}</text>
								<text v-if="i.foodDish.huisType==1" style="padding-left: 5rpx;">🐷</text>
								<text v-if="i.foodDish.peType==1" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==2" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
								<text v-if="i.foodDish.peType==3" style="padding-left: 5rpx;">🌶</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom_b flex_between" @click.stop>
					<view class="flex_align_conter">
						<view class="" style="font-weight: 500;">
							<span v-if="item.isPrice" class="f18">￥</span><span v-if="item.isPrice"
								class="f18">{{item.price || 0}}</span>
							<span v-if="item.isOriginalPrice" class="f18"
								style="text-decoration: line-through;font-size: 20rpx;">￥</span><span
								v-if="item.isOriginalPrice" class="f18"
								style="text-decoration: line-through;font-size: 20rpx;">{{item.originalPrice || 0}}</span>
						</view>
						<view class="f18" style="margin-left: 20rpx;">
							库存：{{item.num-item.sales}}
						</view>
					</view>
					<view class="">
						<!-- <image src="" mode=""></image> -->
						<!-- v-model="'2'" -->
						<view class="flex_align_conter">
							<image @click.stop="subtractNum(item.saleNum)" style="width: 44rpx;height: 44rpx;"
								src="@/static/images/icons/subtract.svg" mode="">
							</image>
							<view class="f18" style="margin:0 24rpx;">
								{{item.saleNum || 0}}
							</view>
							<image @click.stop="addNum(item.saleNum)" style="width: 44rpx;height: 44rpx;"
								src="@/static/images/icons/add.svg" mode="">
							</image>
						</view>
						<!-- <uni-number-box :min="0" :value="item.num" @blur="blur" @focus="focus" @change="changeValue" /> -->
					</view>
				</view>
			</view>
		</view>
		<view class="flex " v-else-if="item.foodId">
			<image v-if="item.image && JSON.parse(item.image).length > 0"
				style="width: 170rpx;height: 170rpx;border-radius: 16rpx;" :src="JSON.parse(item.image)[0].url"
				mode="aspectFill">
			</image>
			<!-- 			<image v-if="item.coverImage" style="width: 170rpx;height: 170rpx;border-radius: 16rpx;"
				:src="item.coverImage" mode=""></image> -->
			<view class="combo">
				<view class="">
					<view class="flex_between">
						<view class="flex f18" style="display: flex;align-items: center;" >
							<text>{{item.foodName}}</text>
							<text v-if="item.huisType==1" style="padding-left: 5rpx;">🐷</text>
							<text v-if="item.peType==1" style="padding-left: 5rpx;">🌶</text>
							<text v-if="item.peType==2" style="padding-left: 5rpx;">🌶</text>
							<text v-if="item.peType==2" style="padding-left: 5rpx;">🌶</text>
							<text v-if="item.peType==3" style="padding-left: 5rpx;">🌶</text>
							<text v-if="item.peType==3" style="padding-left: 5rpx;">🌶</text>
							<text v-if="item.peType==3" style="padding-left: 5rpx;">🌶</text>
						</view>
						<view class="sales f18"
							v-if="item.sales && tableCuisine.filter(el=>el.dictLabel == '累计销量').length > 0 && tableCuisine.filter(el=>el.dictLabel == '累计销量')[0].dictValue == 1">
							销量：{{item.sales < 0 ? 0 : item.sales}}
						</view>
					</view>
					<view class="describe">
						<view class="f18"
							v-if="item.taste && tableCuisine.filter(el=>el.dictLabel == '口味').length > 0 && tableCuisine.filter(el=>el.dictLabel == '口味')[0].dictValue == 1">
							口味：{{item.taste}}
						</view>
						<view class="ingredient-list flex_align_conter"
							v-if="item.foodIngredientsDishList.length > 0 && tableCuisine.filter(el=>el.dictLabel == '食材清单').length > 0 && tableCuisine.filter(el=>el.dictLabel == '食材清单')[0].dictValue == 1">
							<view class="f18">
								食材：
							</view>
							<view class="ingredient-item f18" v-for="(i,index) in item.foodIngredientsDishList"
								:key="i.name">
								<text class="name">{{ i.ingredientsName }} </text>
								<text v-if="index != item.foodIngredientsDishList.length-1">、</text>
								<!-- <text class="weight">{{ i.num }}{{getUnit(i.unit)}}</text> -->
							</view>
						</view>
						<view class="f18"
							v-if="item.allergy && tableCuisine.filter(el=>el.dictLabel == '过敏源').length > 0 && tableCuisine.filter(el=>el.dictLabel == '过敏源')[0].dictValue == 1">
							过敏源：{{item.allergy}}
						</view>
						<!-- 	<view class="" v-for="i in item.listItem">
							<view class="" v-if="i.type == 1">
								主菜：{{i.foodDish.foodName}}
							</view>
						</view> -->
						<!-- <view>主菜：鱼香肉丝</view>
		<view>配菜：宫保鸡丁、红烧肉 </view>
		<view>主食：米饭 </view>
		<view>汤类：紫菜蛋花汤</view> -->
					</view>

				</view>
				<view class="bottom_b flex_between" @click.stop>
					<view class="flex_align_conter">
						<view class="f18" style="font-weight: 500;">
							<span v-if="item.isPrice" class="f18">￥</span><span class="f18">{{item.price || 0}}</span>
						</view>
						<view class="f18" style="font-size: 16rpx;margin-left: 20rpx;">
							库存：{{item.num - item.sales}}
						</view>
					</view>
					<view class="">
						<!-- <image src="" mode=""></image> -->
						<!-- v-model="'2'" -->
						<view class="flex_align_conter">
							<image @click.stop="subtractNum(item.saleNum)" style="width: 44rpx;height: 44rpx;"
								src="@/static/images/icons/subtract.svg" mode="">
							</image>
							<view class="f18" style="margin:0 24rpx;">
								{{item.saleNum || 0}}
							</view>
							<image @click.stop="addNum(item.saleNum)" style="width: 44rpx;height: 44rpx;"
								src="@/static/images/icons/add.svg" mode="">
							</image>
						</view>
						<!-- <uni-number-box :min="0" :value="item.num" @blur="blur" @focus="focus" @change="changeValue" /> -->
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		listData,
		getData,
		delData,
		addData,
		updateData
	} from "@/api/system/dict/data"

	export default {
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			tabsSideIndex: {
				type: Number,
				default: 0
			}
		},
		// externalClasses: ['parent-class'],
		data() {
			return {
				tableColumn: [],
				tableCuisine: []
			}
		},
		mounted() {
			this.dictdata()
		},

		methods: {
			async dictdata() {
				const res = await listData({
					dictType: "combo_column",
					pageSize: 99,
					pageNum: 1
				})

				const data = await listData({
					dictType: "cuisine_column",
					pageSize: 99,
					pageNum: 1
				})

				const T = JSON.parse(JSON.stringify(res.rows));
				// const U = {}
				// T.forEach(el => {
				//   U[el.dictLabel] = el.dictValue
				// })

				const S = JSON.parse(JSON.stringify(data.rows));
				// const I = {}
				// S.forEach(el => {
				//   I[el.dictLabel] = el.dictValue
				// })

				this.tableColumn = T;
				this.tableCuisine = S;
			},
			goDishesDetails() {

				const tableColumn = this.tableColumn.filter(item => item.dictValue == 1)
				const tableCuisine = this.tableColumn.filter(item => item.dictValue == 1)
				this.$set(this.item, this.tabsSideIndex == 0 ? 'tableColumn' : tableCuisine, this.tabsSideIndex == 0 ?
					tableColumn : tableCuisine)
				if (this.item.foodId) {
					// 菜品
					this.$tab.navigateTo(
						`/pages/reserve/dishesDetails?id=${this.item.foodId}&lzy_id=${this.item.lzy_id}&saleNum=${this.item.saleNum || 0}`
					)
				} else if (this.item.comboId) {
					// 套餐
					// this.$tab.navigateTo(
					// 	`/pages/reserve/comboDetails?id=${this.item.comboId}&lzy_id=${this.item.lzy_id}&saleNum=${this.item.saleNum || 0}`
					// )
					this.$emit('comboDetails', this.item)
				}
			},
			addNum(e) {
				if (this.item.limitPerUser != '-1' && e >= Number(this.item.limitPerUser)) return this.$modal.msg('超出限购数量')
				const r = this.item.num - this.item.sales
				if (e >= r) return this.$modal.msg('库存不足')
				let n = e + 1
				this.changeValue(n)
			},
			subtractNum(e) {
				if (e >= 1) {
					let n = e - 1
					this.changeValue(n)
				}
			},
			focus() {},
			blur() {},
			changeValue(e) {
				this.item.saleNum = e
				this.$emit('updateNum', this.item, e) // 通知父组件哪个套餐+1
			},
		}
	}
</script>

<style lang="scss" scoped>
	.meal {
		margin-top: 10rpx;

		.combo {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			margin-left: 20rpx;

			.sales {
				font-size: 16rpx;
			}
		}

		.describe {
			font-weight: 350;
			margin-top: 4rpx;
			font-size: 20rpx;
		}

		.bottom_b {
			// margin-top: 10rpx;
		}

		.num {
			display: flex;
			align-items: end;
			justify-content: end;
			width: 60rpx;
			font-size: 28rpx;
			color: #0EB275;
		}
	}
</style>